<template>
  <div class="friend-main">
    <div class="common-content">
      <div class="title">
        依托单位
      </div>
      <ul class="content">
<!--        <li class="item" v-for="item in list" :key="item.id">-->
<!--          <img :src="$TOOL.filterUrl(item.logoAddress)">-->
<!--           <p>{{item.title}}</p>-->
<!--        </li>-->
        <swiper
            :modules="modules"
            :loop="true"
            :slides-per-view="7"
            :space-between="50"
            :autoplay="{ delay: 4000, disableOnInteraction: false }"
            :navigation="navigation"
            :pagination="{ clickable: true }"
            class="swiperBox"
            @slideChange="onSlideChange"
        >
          <swiper-slide  v-for="item in list" :key="item.id">
            <div class="h-full df-sc">
              <li @click="openUrl(item.address)" class="item">
                <img :src="$TOOL.filterUrl(item.logoAddress)">
                <p class=" sub-title">{{item.title}}</p>
              </li>
            </div>

          </swiper-slide>
          <div class="swiper-button-prev" />
          <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
          <div class="swiper-button-next" />
          <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
        </swiper>
      </ul>
    </div>
  </div>


</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';

// 引入swiper核心和所需模块
import { Autoplay, Navigation } from 'swiper/modules'
import {homeApi} from "@/api";

const navigation = ref({
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
});
// 在modules加入要使用的模块
const modules = [Autoplay, Navigation]


const list=ref([
  // {
  //   title: "农业农村部",
  //   logoAddress: new URL('/images/link_1.png', import.meta.url).href,
  //   url: ""
  // },
  // {
  //   title: "四川省农业农村厅",
  //   logoAddress: new URL('/images/link_2.png', import.meta.url).href,
  //   url: ""
  // },
  // {
  //   title: "四川省农业科学院",
  //   logoAddress: new URL('/images/link_3.png', import.meta.url).href,
  //   url: ""
  // },
  // {
  //   title: "四川农业大学",
  //   logoAddress: new URL('/images/link_4.png', import.meta.url).href,
  //   url: ""
  // },
  // {
  //   title: "四川省草原科学研究院",
  //   logoAddress: new URL('/images/link_5.png', import.meta.url).href,
  //   url: ""
  // },
  // {
  //   title: "农业农村部",
  //   logoAddress: new URL('/images/link_6.png', import.meta.url).href,
  // },
])
onMounted(loadPageData)
async function loadPageData(){
  list.value= await  homeApi.linkManageInfoList.get()
}

function openUrl(url){
  window.open(url)
}
</script>

<style scoped lang="scss">
.swiperBox{
  padding: 0 50px;
  height: 100%;
}
.swiper-button-prev{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  &:after{
    font-size: 18px !important;
    color: #FFFFFF;
  }
}
.swiper-button-next{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  &:after{
    font-size: 18px !important;
    color: #FFFFFF;
  }
}
.friend-main {
  width: 100%;
  background: #FFFFFF;

  .common-content {
    height: 230px;
    display: flex;
    align-items: center;

    .title {
      font-weight: bold;
      writing-mode: vertical-rl;
      font-size: 32px;
      letter-spacing: 2px;
      color: #015293;
      border-right: 1px solid #333;
      padding: 10px 30px 10px 50px;
    }


  }
  .content {
    overflow: auto;
    display: flex;
    gap: 66px;
    height: 100%;
    align-items: center;
    margin-left: 30px;
    &::-webkit-scrollbar{
      display: none;
    }
    .item {
      width: 200px;
      height: 130px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      cursor: pointer;
      &:hover{
        img{
          top:-10px;
        }
      }
      img{
        position: relative;
        top: 0;
        height: 60px;
        transition: top 0.3s ease-out;
      }
      .sub-title{
        width: 100px;
        height: 50px;
        text-align: center;
        font-size: 14px;
      }
    }
  }
}
</style>
